<!-- 销售统计 -->
<template>
  <div class="sales_page" v-if="hasShow">
    <div class="main_label">
      <span>销售统计</span>
      <span class="sort_btn" v-show="isEdit" @click="setSalesSort">调整排序</span>
    </div>
    <ul v-show="salesTmplate.length > 0" class="sales_content">
      <li class="item" v-for="(item, index) in salesTmplate" :key="index">
        <span>{{ item.dailyConfigShortName }}：</span>
        <span v-if="item.fieldName !== 'cumulateBuyback' && item.fieldName !== 'buyback'">
          {{ infoData[item.fieldName + 'Quantity'] || '0' }}套
        </span>
        <span :class="item.fieldName !== 'cumulateBuyback' && item.fieldName !== 'buyback' ? 'price' : ''">
          <span v-if="item.fieldName !== 'cumulateBuyback' && item.fieldName !== 'buyback'">(</span>
          {{ infoData[item.fieldName + 'Amount'] || '0' }}元
          <span v-if="item.fieldName !== 'cumulateBuyback' && item.fieldName !== 'buyback'">)</span>
        </span>
      </li>
    </ul>
    <set-sales ref="setSales" />
  </div>
</template>

<script>
  import setSales from '../modal/setSales.vue'
  import dailyApi from '@/biz/buildingHome/daily'

  export default {
    props: ['isEdit'],
    components: { setSales },
    data() {
      return {
        infoData: {},
        salesTmplate: [],
        hasShow: false
      }
    },
    methods: {
      //调整排序
      setSalesSort() {
        console.log(123123)
        this.$refs.setSales.show()
      },
      getTemplate(data) {
        dailyApi.getModelListForApp({ buildingId: this.$dt.buildInfo().housesId }).then((res) => {
          console.log(res[3], '获取销售统计模板')
          this.hasShow = res[3].hasShow
          let tmpList = res[3].childModelConfig.filter((item) => {
            return item.hasLock
          })
          this.salesTmplate = tmpList.slice(0, 5)
          console.log(this.salesTmplate, '获取销售统计模板')
          this.getData()
        })
      },
      getData() {
        let params = {
          orgId: this.$dt.buildInfo().housesId,
          level: 4,
          startTime: this.$parent.currentDate,
          endTime: this.$parent.currentDate
        }
        dailyApi.orderSales(params).then((res) => {
          this.infoData = res
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .sales_page {
    width: 100%;
    margin-bottom: 15px;

    .main_label {
      display: flex;
      justify-content: space-between;
      line-height: 20px;
      border-left: 5px solid #2b85e4;
      padding-left: 8px;
      font-size: 15px;
      margin-bottom: 15px;

      .sort_btn {
        color: #2d8cf0;
        cursor: pointer;
        margin-right: 10px;
        font-size: 13px;
      }
    }

    .sales_content {
      border: 1px solid #ccc;
      padding: 0 10px;
      border-radius: 5px;

      li {
        border-bottom: 1px solid #ccc;
        padding: 10px 5px;
      }

      li:last-child {
        border-bottom: 0;
      }

      .price {
        color: #999;
        margin-left: 10px;
      }
    }
  }
</style>
